<template>
  <div class="InterviewResults">
    <!--面包屑导航区域-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>求职管理</el-breadcrumb-item>
      <el-breadcrumb-item>面试结果</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图·-->
    <el-card class="box-card">
      <!-- 面试结果查询内容 -->
      <div class="info-search">
        <div>
          <span>面试时间：</span><el-date-picker v-model="meetDate" type="date" size="small" placeholder="选择日期"></el-date-picker>
        </div>
        <div>
          <span>面试结果：</span>
          <el-select v-model="meetResultValue" placeholder="请选择" size="small">
            <el-option v-for="item in meetResultList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>
        <div>
          <el-button type="primary" size="small">查询</el-button>
        </div>
      </div>
      <!-- 面试结果查询列表 -->
      <div class="info">
        <el-table :data="searchInfo" border style="width: 100%" :height="tableHeight + 'px'" :default-sort = "{prop: 'date', order: 'descending'}">
          <el-table-column prop="date" fixed='left' sortable label="面试日期" width="180" align="center"></el-table-column>
          <el-table-column prop="company" label="面试公司" width="230" align="center"></el-table-column>
          <el-table-column prop="address" label="面试地址" width="230" align="center"></el-table-column>
          <el-table-column prop="position" label="面试职位" width="180" align="center"></el-table-column>
          <el-table-column prop="result" label="面试结果" width="180" align="center"></el-table-column>
          <el-table-column label="操作" fixed="right" align="center">
            <template slot-scope="scope">
              <!--查看详情按钮-->
              <el-tooltip effect="dark" content="查看" placement="top" :enterable="false">
                <el-button type="primary" icon="el-icon-setting" size="mini" @click="showLookDialog(scope.row)"></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 面试结果分页查询 -->
      <div class="info-footer">
        <el-pagination layout="prev, pager, next" :page-size="queryInfo.pageSize" :total="queryInfo.recordSum"></el-pagination>
      </div>
    </el-card>
    <!-- 查看面试结果对话框 -->
    <el-dialog title="面试结果" :visible.sync="lookDialog" width="700px" class="lookDialogStyle">
      <div class="lookDialogStyleOne">
        <el-progress type="circle" :percentage="percentage" :color="colors"></el-progress>
        <el-form ref="form" :model="currentMeetResult" label-width="80px">
          <el-form-item label="面试公司">
            <el-input v-model="currentMeetResult.company" disabled></el-input>
          </el-form-item>
          <el-form-item label="面试地址">
            <el-input v-model="currentMeetResult.address" disabled></el-input>
          </el-form-item>
          <el-form-item label="面试职位">
            <el-input v-model="currentMeetResult.position" disabled></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="lookDialogStyleTwo"><span>当前轮次:{{currentMeetResult.currentCount}}</span><span>面试轮次:{{currentMeetResult.allCount}}</span></div>
      <div class="lookDialogStyleThree" :style="'height:' + 80*currentMeetResult.allCount + 'px'">
        <el-steps direction="vertical" :active="currentMeetResult.currentCount" finish-status="success">
          <el-step :title="'轮次' +  index" v-for="index in currentMeetResult.allCount" :key="index" description="面试时间：2021-01-11 面试对象：人事部 面试结果：不合格"></el-step>
        </el-steps>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="lookDialog = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableHeight:document.documentElement.clientHeight/1.7,
        // 查询条件
        queryInfo:{
          pageIndex:0,
          pageSize:4,
          recordSum:10
        },
        meetDate:'',
        meetResultValue:'',
        meetResultList:[
          {value:'1',label:'已通过'},
          {value:'2',label:'未通过'}
        ],
        // 查询结果
        searchInfo:[
          {date:'2020-01-01',company:'山西维木教育科技有限责任公司',address:'未央区·龙首村',position:'小初高中在线问答',result:'未通过',currentCount:2,allCount:2},
          {date:'2020-01-11',company:'轻轻在线科技公司',address:'西安未央区西安工业大学',position:'线上授课老师',result:'未通过',currentCount:2,allCount:3},
          {date:'2020-01-13',company:'轻轻在线科技公司2',address:'西安未央区西安工业大学',position:'线上授课老师',result:'未通过',currentCount:1,allCount:1},
          {date:'2020-02-11',company:'轻轻在线科技公司3',address:'西安未央区西安工业大学',position:'线上授课老师',result:'未通过',currentCount:1,allCount:2},
          {date:'2020-03-11',company:'轻轻在线科技公司4',address:'西安未央区西安工业大学',position:'线上授课老师',result:'未通过',currentCount:3,allCount:3}
        ],
        // 查看面试结果对话框
        lookDialog:false,
        percentage: 0,
        colors: [
          {color: '#f56c6c', percentage: 20},
          {color: '#e6a23c', percentage: 40},
          {color: '#5cb87a', percentage: 60},
          {color: '#1989fa', percentage: 80},
          {color: '#6f7ad3', percentage: 100}
        ],
        // 面试结果详情
        currentMeetResult:{}
      }
    },
    created() {
      this.$data.queryInfo.recordSum = this.$data.searchInfo.length
    },
    methods:{
      // 打开面试结果对话框
      showLookDialog(row) {
        this.$data.lookDialog = true
        this.$data.currentMeetResult = row
        this.$data.percentage = parseInt((row.currentCount/row.allCount * 100).toFixed(0))
      }
    }
  }
</script>

<style lang="less" scoped>
  .info-search{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    min-width: 700px;
    div{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
    }
  }
  .info-footer{
    display: flex;
    justify-content: center;
  }
  .lookDialogStyleOne{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    .el-input{
      width: 300px;
      margin-left: 0px;
    }
  }
  .lookDialogStyleTwo{
    width: 80%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: 20px auto;
    span{
      color: black;
      font-size: 20px;
    }
  }
</style>